import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button, CheckBox, Icon } from 'react-native-tengits-elements';
import Swiper from 'react-native-tengits-swiper';
import { TText } from '../../common/Widgets/WidgetDefault';
import _ from 'lodash';
import { Colors, FontSize } from '../../common/Theme/TTheme';
import { scaleSize } from '../../common/Utils/ToolUtils';
import { StrategyDescItem, StrategyTimeTip } from './SubItemComponent';

export const OverlayStrategyList = (props) => {
  const CHUNKGROUP = 4;
  const [id, setId] = useState(props.id || 0);
  const [selectStrategy, setSelectStrategy] = useState(props.id ? props.data.filter(item=>item.id == props.id)[0] : null);
  const chunk_data = _.chunk(props.data, CHUNKGROUP);
  const page = function(){
    for(let i = 0; i < (props.data||[]).length ; i++) {
        if(props.data[i].id == props.id) {
            return Math.floor(i/CHUNKGROUP);
        }
    }
    return 0;
  }();
  return (
    <View style={{flex:1, flexDirection:'column', backgroundColor:Colors.white}}>
            <View style={styles.header}>
                <Text style={{fontSize: FontSize.h3_font, color: Colors.white}}>{props.canSel ? "选择策略" : "查看策略"}</Text>
                <Button 
                    containerStyle={{position:'absolute', top:0, right:0}}
                    buttonStyle={{backgroundColor:'transparent', width:scaleSize(117), height:scaleSize(88)}} 
                    icon={<Icon name='close' color={Colors.white} size={scaleSize(40)}/>}
                    onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("StrategySelect");
                }}/>
            </View>
            <View style={{flex:1, paddingVertical:scaleSize(40), flexDirection:'column'}}>
                <View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
                    {chunk_data.length > 0 ? <Swiper index={page} showsButtons={true} 
                            loop={false} autoplay={false} buttonWrapperStyle={{paddingHorizontal:0}}
                            prevButton={<Icon size={scaleSize(40)} name='chevron-left' type='font-awesome' containerStyle={styles.pageBtn} color={Colors.button_color}/>}
                            nextButton={<Icon size={scaleSize(40)} name='chevron-right' type='font-awesome' containerStyle={styles.pageBtn} color={Colors.button_color}/>}
                            showsPagination={false} scrollEnabled={false}>
                        {chunk_data.map((item, ix)=>{
                            return <View style={{flex:1, paddingHorizontal:scaleSize(70), flexDirection:'row'}} key={"Strategy"+id}>
                                {item.map((it, i)=>{
                                    return <StrategyDescItem 
                                        key={"strategy_item" + ix + "_" + i}
                                        canSel={props.canSel} 
                                        item={it} 
                                        id={it.id} 
                                        checkedId={id}
                                        callback={(item, id)=>{setSelectStrategy(item);setId(id)}}/>
                                })}
                            </View>
                        })}    
                    </Swiper> : null}
                </View>
                <View style={{paddingHorizontal:scaleSize(20), paddingVertical:scaleSize(17), marginTop:scaleSize(34), marginHorizontal:scaleSize(100), height:scaleSize(168), backgroundColor:"#E5E6F4"}}>
                    <Text style={{fontSize:FontSize.h5_font}}>{"策略内容："}</Text>
                    <View style={{flexDirection:'row', flexWrap:'wrap'}}>
                    {(selectStrategy ? JSON.parse(selectStrategy?.setting) : []).map((item, index)=>{
                        return <StrategyTimeTip key={"tip_"+index} item={item}/>
                    })}
                    </View>
                </View>
                {props.canSel ? <View style={{marginTop:scaleSize(20), flexDirection:'row', alignItems:'flex-end', justifyContent:'center'}}>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), backgroundColor: Colors.button_cancel_color}} 
                        titleStyle={{color:Colors.text1_color, fontSize:FontSize.h4_font}}
                        title={"取消"} 
                        onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("StrategySelect");
                    }}/>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), marginLeft:scaleSize(30), backgroundColor: Colors.button_color}}
                        titleStyle={{fontSize:FontSize.h4_font}}
                        title={"确定"} onPress={async()=>{
                        props.onSure && props.onSure("StrategySelect", selectStrategy);
                    }}/>
                </View> : <View style={{marginTop:scaleSize(20), flexDirection:'row', alignItems:'flex-end', justifyContent:'center'}}>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), backgroundColor: Colors.button_cancel_color}} 
                        titleStyle={{color:Colors.text1_color, fontSize:FontSize.h4_font}}
                        title={"关闭"} 
                        onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("StrategySelect");
                    }}/></View>}
            </View>
        </View>
  );
};

const styles = StyleSheet.create({
    header:{
        flexDirection: 'row',
        height: scaleSize(88),
        backgroundColor: Colors.navibar_color,
        alignItems:'center',
        justifyContent:'center'
    },
    pageBtn:{
        justifyContent:'center',
        width:scaleSize(100), 
        height:scaleSize(200),
    }
});